<extend name="public@base"/>
<block name="head">
<title>{$category.name}</title>
<style>
    .bgImgText {
        position: absolute;
        color: white;
        text-align: center;
        top: 60%;
        left: 0px;
        right: 0px;
        font-size: 70px;
        line-height: 70px;
        font-weight: bold;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
    }
    .help-block ul.list-unstyled li {
        margin-top: 2px;
    }
    .notRobotCheck {
        width: 250px;
        background: #f6f6f6;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 10px 10px;
    }
    .notRobotCheck::after {
        content: "";
        clear: both;
        display: block;
    }
    .showLeft {
        float: left;
        padding: 0px 36px 0px 0px;
        margin-top: 20px;
    }
    .showLeft input {
        width: 26px;
        height: 26px;
        vertical-align: middle;
    }
    .showLeft label {
        padding-left: 10px;
        vertical-align: sub;
        margin-top: 8px;
    }
    .showRight {
        float: left;
        text-align: center;
    }
    .showRight img {
        width: 40px;
    }
    .showRight p {
        text-align: left;
        margin-bottom: 2px;
        font-size: 12px;
        line-height: 14px;
    }
    .rightTitle {

    }
    .rightCont {
        color: black;
    }
    select option:nth-of-type(1) {
        color: #aaa;
        background: #eee;
    }
    .flatpickr-calendar.open {
        z-index: 990;
    }
</style>
</block>
<block name="body">
        <!-- 幻灯片 -->
        <div>
            <php>
                $reservations_slide_id=empty($theme_vars['reservations_slide'])?0:$theme_vars['reservations_slide'];
            </php>
            <slides id="$reservations_slide_id">
                <div class="container" style="position: relative;">
                    <a href="{$vo.url|default=''}"><img src="{:cmf_get_image_url($vo.image)}" alt="{$vo.title|default=''}" title="{$vo.title|default=''}" style="width: 100%;user-select: none;"></a>
                    <!-- <p class="bgImgText">GET IN TOUCH</p> -->
                </div>
            </slides>
            <noslides id="$reservations_slide_id">
                <div class="container" style="position: relative;">
                    <a href="__ROOT__"><img src="__TMPL__/public/assets/img/bgboat.png" alt="This slide is just a demonstration, you have not set any slides, please go to the background template settings!" title="This slide is just a demonstration, you have not set any slides, please go to the background template settings!" style="width: 100%;user-select: none;"></a>
                    <!-- <p class="bgImgText">GET IN TOUCH</p> -->
                </div>
            </noslides>
        </div>
        
        <!-- The Line -->
        <div class="hrLine"></div>
        
        <!-- Book -->
        <section class="contact-us-section ptb-100 white-bg" style="padding-top: 30px;">
            <div class="container">
                <div class="row">                   
                    <div class="col-md-6 col-lg-6"> 
                        <form id="reservationForm" action="{:cmf_plugin_url('HzMsgBorad://Do/addmsg');}">
                            <div class="form-group">
                                <span class="formLable requiredForm">Name</span>
                                <div class="row">
                                    <div class="col-lg-6"> 
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required data-error="Please enter your first name">
                                            <span>First</span>
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6"> 
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required data-error="Please enter your last name">
                                            <span>Last</span>
                                            <div class="help-block with-errors"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <span class="formLable requiredForm">Phone</span>
                                <input type="phone" class="form-control" id="phone" name="phone" placeholder="Phone" required data-error="Please enter your phone">
                                <div class="help-block with-errors"></div>
                            </div>

                            <div class="form-group">
                                <span class="formLable requiredForm">Email</span>
                                <input type="email" class="form-control" id="email" name="email" placeholder="Email" required data-error="Please enter your email">
                                <div class="help-block with-errors"></div>
                            </div>

                            <div class="form-group">
                                <span class="formLable requiredForm">Date</span>
                                <!-- <input type="text" class="form-control" id="date" name="date" placeholder="Date" required data-error="Please enter your date"> -->
                                <!-- <input id="date" class="form-control" placeholder="YY-MM-dd" required data-error="Please enter your date">   -->
                                <input type="text" id="date" class="datepicker-here form-control" name="date" data-language="en" data-date-format="yyyy-mm-dd" required data-error="Please enter your date"/>
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <span class="formLable requiredForm">Voyage Package</span>
                                <select class="form-control" id="selectVoyage" name="cat_id" required data-error="Please enter your voyage package">
                                    <option value="">Select Voyage Package</option>
                                    <empty name="voyage">
                                    <else/>
                                        <foreach name="voyage" item="st" key="i">
                                            <option value="{$st.id}">{$st.cat_name}</option>
                                        </foreach>
                                    </empty>
                                </select>
                                <div class="help-block with-errors"></div>
                            </div>

                            <div class="form-group">
                                <span class="formLable">Special Requests/Additional Information</span>
                                <textarea class="form-control" id="message" name="msg" rows="5" placeholder="Special Requests/Additional Information"></textarea>
                            </div>

                            <div class="form-group">
                                <span class="formLable">CAPTCHA</span>
                                <div class="notRobotCheck">
                                    <div class="showLeft">
                                        <div class="form-group form-check">
                                            <input type="checkbox" class="form-check-input" value="1" name="robot" id="notrobot">
                                            <label class="form-check-label" for="notrobot">I'm not a robot</label>
                                        </div>
                                    </div>
                                    <div class="showRight">
                                        <img src="__TMPL__/public/assets/img/notrobot.png" alt="">
                                        <p>reCAPTCHA</p>
                                        <p>Privacy·Terms</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <input type="hidden" name="type" value="2">
                                <button type="submit" id="submit" class="btn default-btn mt-10">Submit</button>
                                <!-- <div id="msgSubmit" class="h4 text-center hidden"></div>  -->
                                <div class="clearfix"></div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-6 col-lg-6"> 
                        <portal:articles order="post.create_time DESC" page="theme_vars.page_count" relation="categories" categoryIds="$category.id">
                            <h3 class="rightTitle">{$vo.post_title}</h3>
                            <p class="rightCont">
                                {$vo.post_excerpt}
                            </p>
                        </portal:articles>
                        <div class="text-center" style="margin-top: 30px;">
                            <button id="bookBtn" class="specialBtn">Book Now</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Book -->
        <block name="scripts">
    <script>
        (function ($) {
            "use strict";

            // $('#date').datepicker([{
            //     dateFormat: 'yyyy'
            // }])

            $("#reservationForm").validator().on("submit", function (event) {
                if (event.isDefaultPrevented()) {
                    // handle the invalid form...
                    formError();
                    submitMSG(false, "Did you fill in the form properly?");
                } else {
                    // everything looks good!
                    event.preventDefault();
                    submitForm();
                }
            });

            function submitForm(){
                // Initiate Variables With Form Content
                // var firstname = $("#firstName").val();
                // var lastname = $("#lastName").val();
                // var phone = $("#phone").val();
                // var email = $("#email").val();
                // var bookdate = $("#bookdate").val();
                // var selectvoyage = $("#selectVoyage").val();
                // var message = $("#message").val();
                // var notrobot = $("#notrobot").val();
                var url = $("#reservationForm").attr('action');
                if ($(notrobot).is(':checked') === false) {layer.msg('Are you a robot?');return false;};
                //loading层
                var index = layer.load(1, {shade: [0.1,'#fff']});

                $.ajax({
                    type: "POST",
                    url: url,
                    data: $('#reservationForm').serialize(),
                    crossDomain: true == !(document.all),
                    cache: false,
                    success: function (res) {
                        var res = JSON.parse(res);
                        layer.close(index);//关闭进度条
                        if (res.code == 200){
                            layer.msg(res.message,{time:3000},function(){
                                location.reload();
                            });
                        } else {
                            formError();
                            submitMSG(false, res);
                        }
                    }
                });
            }

            function formSuccess () {
                $("#reservationForm")[0].reset();
                submitMSG(true, "Message Submitted!")
            }

            function formError () {
                $("#reservationForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                    $(this).removeClass();
                });
            }

            function submitMSG (valid, msg) {
                if (valid) {
                    var msgClasses = "h5 text-center tada animated text-success mt-3";
                } else {
                    var msgClasses = "h5 text-center text-danger mt-3";
                }
                $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
            }
        } (jQuery));
    </script>
</block>
</block>